<!DOCTYPE html>
<html lang="en">
<head>

  {% block title %}<title>Local Library</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- Add additional CSS in static file -->
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>

<div class="container-fluid">

<div class="row">
  <div class="col-sm-2">
  {% block sidebar %}
  <ul class="sidebar-nav list-group">
    <li class="list-group-item border-0 bg-transparent">
      <a href="{% url 'index' %}" class="text-decoration-none d-flex align-items-center">
        <i class="fas fa-home me-2"></i> Home
      </a>
    </li>
    <li class="list-group-item border-0 bg-transparent">
      <a href="{% url 'bookinstances' %}" class="text-decoration-none d-flex align-items-center">
        <i class="fas fa-book-open me-2"></i> All book copies
      </a>
    </li>
    <li class="list-group-item border-0 bg-transparent">
      <a href="{% url 'books' %}" class="text-decoration-none d-flex align-items-center">
        <i class="fas fa-book me-2"></i> All books
      </a>
    </li>
    <li class="list-group-item border-0 bg-transparent">
      <a href="{% url 'authors' %}" class="text-decoration-none d-flex align-items-center">
        <i class="fas fa-user-edit me-2"></i> All authors
      </a>
    </li>
    <li class="list-group-item border-0 bg-transparent">
      <a href="{% url 'genres' %}" class="text-decoration-none d-flex align-items-center">
        <i class="fas fa-tags me-2"></i> All genres
      </a>
    </li>
    <li class="list-group-item border-0 bg-transparent">
      <a href="{% url 'languages' %}" class="text-decoration-none d-flex align-items-center">
        <i class="fas fa-language me-2"></i> All languages
      </a>
    </li>
  </ul>

  <ul class="sidebar-nav list-group">
   {% if user.is_authenticated %}
     <li class="list-group-item border-0 bg-transparent">
       <span class="d-flex align-items-center">
         <i class="fas fa-user me-2"></i> {{ user.get_username }}
       </span>
     </li>
     <li class="list-group-item border-0 bg-transparent">
       <a href="{% url 'my-borrowed' %}" class="text-decoration-none d-flex align-items-center">
         <i class="fas fa-bookmark me-2"></i> My borrowed
       </a>
     </li>
     <li class="list-group-item border-0 bg-transparent">
       <form id="logout-form" method="post" action="{% url 'logout' %}">
         {% csrf_token %}
         <button type="submit" class="btn btn-sm btn-outline-danger w-100 text-start">
           <i class="fas fa-sign-out-alt me-2"></i> Logout
         </button>
       </form>
    </li>
   {% else %}
     <li class="list-group-item border-0 bg-transparent">
       <a href="{% url 'login'%}?next={{request.path}}" class="text-decoration-none d-flex align-items-center">
         <i class="fas fa-sign-in-alt me-2"></i> Login
       </a>
     </li>
   {% endif %}
  </ul>

   {% if user.is_staff %}
   <div class="border-top my-3 pt-2">
     <ul class="sidebar-nav list-group">
       <li class="list-group-item border-0 bg-transparent">
         <span class="d-flex align-items-center fw-bold">
           <i class="fas fa-user-shield me-2"></i> Staff
         </span>
       </li>
       <li class="list-group-item border-0 bg-transparent">
         <a href="{% url 'all-borrowed' %}" class="text-decoration-none d-flex align-items-center">
           <i class="fas fa-clipboard-list me-2"></i> All borrowed
         </a>
       </li>
       {% if perms.catalog.add_genre %}
       <li class="list-group-item border-0 bg-transparent">
         <a href="{% url 'genre-create' %}" class="text-decoration-none d-flex align-items-center">
           <i class="fas fa-plus-circle me-2"></i> Create genre
         </a>
       </li>
       {% endif %}
       {% if perms.catalog.add_language %}
       <li class="list-group-item border-0 bg-transparent">
         <a href="{% url 'language-create' %}" class="text-decoration-none d-flex align-items-center">
           <i class="fas fa-plus-circle me-2"></i> Create language
         </a>
       </li>
       {% endif %}
       {% if perms.catalog.add_author %}
       <li class="list-group-item border-0 bg-transparent">
         <a href="{% url 'author-create' %}" class="text-decoration-none d-flex align-items-center">
           <i class="fas fa-plus-circle me-2"></i> Create author
         </a>
       </li>
       {% endif %}
       {% if perms.catalog.add_book %}
       <li class="list-group-item border-0 bg-transparent">
         <a href="{% url 'book-create' %}" class="text-decoration-none d-flex align-items-center">
           <i class="fas fa-plus-circle me-2"></i> Create book
         </a>
       </li>
       {% endif %}
       {% if perms.catalog.add_bookinstance %}
       <li class="list-group-item border-0 bg-transparent">
         <a href="{% url 'bookinstance-create' %}" class="text-decoration-none d-flex align-items-center">
           <i class="fas fa-plus-circle me-2"></i> Create copy of book
         </a>
       </li>
       {% endif %}
     </ul>
   </div>
   {% endif %}

{% endblock %}
  </div>
  <div class="col-sm-10">
    <div class="card mb-4">
      <div class="card-body">
        {% block content %}{% endblock %}
      </div>
    </div>

  {% block pagination %}
    {% if is_paginated %}
      <div class="card">
        <div class="card-body">
          <div class="pagination justify-content-center">
            {% if page_obj.has_previous %}
              <a href="{{ request.path }}?page={{ page_obj.previous_page_number }}" class="btn btn-sm btn-outline-primary">
                <i class="fas fa-chevron-left"></i> Previous
              </a>
            {% endif %}
            <span class="page-current mx-3 align-self-center">
              Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>
            {% if page_obj.has_next %}
              <a href="{{ request.path }}?page={{ page_obj.next_page_number }}" class="btn btn-sm btn-outline-primary">
                Next <i class="fas fa-chevron-right"></i>
              </a>
            {% endif %}
          </div>
        </div>
      </div>
    {% endif %}
  {% endblock %}
  </div>
</div>

</div>
</body>
</html>
